<template>
  <div ref="reportChart" style="width:200px;height: 100%;">
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
props:['lineData'],
data() {
  return {
      chart:"",
      data:undefined,
      min:undefined,
      max:undefined,
      gap:undefined,
  }
},
watch: {
  lineData: function(newValue, oldValue) {
    // console.log('NEW:' + newValue)
    // console.log('OLD:' + oldValue)
    this.initChart()
  }
},
mounted() {
  // for(let i=0 ; i<this.lineData.length;i++){
  //   this.lineData[i] = Number(this.lineData[i])
  // }
  this.data = this.lineData
  // this.min = this.lineData.sort()[0]
  // this.max = this.lineData.sort()[this.lineData.length-1]
  // let l=0
  // let temp = this.max
  // let front = undefined
  // while(temp >= 1){
  //   temp = temp/10
  //   front = temp%10
  // 	l++;
  // }
  // for(let i=0 ;i<this.lineData.length ; i++){
  //   this.data[i] = (this.data[i]/((Math.pow(10,l))*front))
  // }
  // console.log('data',this.data)
  // this.min = this.lineData.sort()[0]
  // this.max = this.lineData.sort()[this.lineData.length-1]
  // this.gap = (this.max-this.min)/4
  this.initChart()

  // console.log('min',this.min,this.max,this.gap)
},
methods: {
  initChart() {
    this.chart = echarts.init(this.$refs.reportChart)
    // this.chart.resize()
    let option = {
      xAxis: {
        type: "category",
        // boundaryGap: false,
        // data: ["1", "2", "3", "4", "5","6"],
        show:false,
      },
      yAxis: {
        // length:1,
        // onZero:false,
        type: "value",
        // min:function(value){
        //   return value.min;
        // },
        // max:function(value){
        //   return value.max;
        // },
        // min:this.min,
        // max:this.max,
        show:false
      },
      series: [
        {
          symbol:'none',
          type: 'line',
          smooth:true,
          itemStyle:{
            normal:{
              lineStyle:{
                color:'#2d76fe',
              }
            }
          },
          areaStyle:{
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(45, 118, 254,0.3)'    //靠上方的透明颜色
            },
            {
              offset: 1,
              color: 'rgba(45, 118, 254,0.1)'    //靠下方的透明颜色
            }
          ])
        },
        data: this.lineData,
        }
      ]
    }
    this.chart.setOption(option, true)
  }
}
}
</script>

<style>
</style>
